import { NavBar } from 'antd-mobile';
import { history } from 'umi';
import React, { useReducer } from 'react';
function reducer(state, action) {
  switch (action.type) {
    case 'incremented_age': {
      return {
        name: state.name,
        age: state.age + 1,
      };
    }
    case 'changed_name': {
      return {
        name: action.nextName,
        age: state.age,
      };
    }
  }
  throw Error('Unknown action: ' + action.type);
}
const initialState = { name: 'Taylor', age: 42 };
const quotation = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  function back(): void {
    history.go(-1);
  }
  function handleButtonClick() {
    dispatch({ type: 'incremented_age' });
  }

  function handleInputChange(e) {
    dispatch({
      type: 'changed_name',
      nextName: e.target.value,
    });
  }
  return (
    <>
      <NavBar onBack={back}>useReducer</NavBar>
      <div>
        <div></div>
        <input value={state.name} onChange={handleInputChange} />
        <button onClick={handleButtonClick}>Increment age</button>
        <p>
          Hello, {state.name}. You are {state.age}.
        </p>
      </div>
    </>
  );
};
export default quotation;
